<template>
  <div>
    <a-row>
      <a-col :span="12">
        <div id="customerChart" style="width: 600px;height:400px;"></div>
      </a-col>
      <a-col :span="12">
        <div id="MoneyChart" style="width: 600px;height:400px;"></div>
      </a-col>
    </a-row>


  </div>
</template>

<script>
import * as echarts from 'echarts'
import {onMounted} from "vue";
import {getAssetReport, getAssetValueReport} from "@/apis/asset";

export default {
  name: "GenerateReport",
  setup() {

    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("customerChart"));
      let moneyChart = echarts.init(document.getElementById("MoneyChart"));
      // 绘制图表

      getAssetReport().then(res => {
        const xarr = []
        const yarr = []

        let j = 0;
        for (let i = res.data.length-1; i >=0; i--,j++) {
          xarr[j] = res.data[i].month
          yarr[j] = res.data[i].count
        }
        for (let i = 1; i < yarr.length; i++) {
          yarr[i] += yarr[i-1]
        }
        option.xAxis.data = xarr
        option.series[0].data = yarr
        myChart.setOption(option);

      })
      getAssetValueReport().then(res=>{

        console.log(res)
        const xarr = []
        const yarr = []

        let j = 0;
        for (let i = res.data.length-1; i >=0; i--,j++) {
          xarr[j] = res.data[i].month
          yarr[j] = res.data[i].value
        }
        for (let i = 1; i < yarr.length; i++) {
          yarr[i] += yarr[i-1]
        }

        moneyOption.xAxis.data = xarr
        moneyOption.series[0].data = yarr
        moneyChart.setOption(moneyOption);

      })

      window.onresize = function () {//自适应大小
        myChart.resize();
        moneyChart.resize();
      };
    })

    const option = {
      title: {text: "总资产量",subtext: '单位：件',},
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "资产量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    }

    const moneyOption = {
      title: {text: "总资产",subtext: '单位：元'},
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    }

    return {

    }

  },


}
</script>

<style scoped>

</style>